<script>
import {getUserInfoDetailApi} from "@/api/my"
import {mapMutations} from "vuex"
import TarBar from "@/components/TarBar.vue"
import SafeBox from "@/components/SafeBox.vue"

export default {
  name: "My",
  components: {SafeBox, TarBar},
  data() {
    return {
      detail: {}
    }
  },
  created() {
    this.getUserInfoDetail()
  },
  methods: {
    ...mapMutations('user', ['REMOVE_USER_INFO']), // 移除个人信息的方法

    // 请求个人信息
    async getUserInfoDetail() {
      const {
        data: {
          userInfo
        }
      } = await getUserInfoDetailApi()
      this.detail = userInfo
    },

    // 退出登录
    async onLogout() {
      uni.showModal({
        title: '温馨提示',
        content: '你确认要退出么？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({icon: 'success', title: '退出成功'})
            setTimeout(() => {
              this.REMOVE_USER_INFO()
              uni.switchTab({url: '/pages/index/index'})
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<template>
  <div class="my" style="padding-bottom: 50px;">

    <SafeBox top></SafeBox>

    <div class="head-page">
      <div class="head-image">
        <image src="@/static/default-avatar.png" alt=""/>
      </div>
      <div class="info">
        <div class="mobile">{{ detail.mobile }}</div>
        <div class="vip">
          <van-icon name="diamond-o"/>
          普通会员
        </div>
      </div>
    </div>

    <div class="my-asset">
      <div class="asset-left">
        <div class="asset-left-item">
          <text>{{ detail.pay_money || 0 }}</text>
          <text>账户余额</text>
        </div>
        <div class="asset-left-item">
          <text>0</text>
          <text>积分</text>
        </div>
        <div class="asset-left-item">
          <text>0</text>
          <text>优惠券</text>
        </div>
      </div>
      <div class="asset-right">
        <div class="asset-right-item">
          <van-icon name="balance-pay"/>
          <text>我的钱包</text>
        </div>
      </div>
    </div>
    <div class="order-navbar">
      <div class="order-navbar-item" @click="uni.navigateTo({url:'/pagesOrders/pages/Orders/Orders?dataType=all'})">
        <van-icon name="balance-list-o"/>
        <text>全部订单</text>
      </div>
      <div class="order-navbar-item" @click="uni.navigateTo({url:'/pagesOrders/pages/Orders/Orders?dataType=payment'})">
        <van-icon name="clock-o"/>
        <text>待支付</text>
      </div>
      <div class="order-navbar-item" @click="uni.navigateTo({url:'/pagesOrders/pages/Orders/Orders?dataType=delivery'})">
        <van-icon name="logistics"/>
        <text>待发货</text>
      </div>
      <div class="order-navbar-item" @click="uni.navigateTo({url:'/pagesOrders/pages/Orders/Orders?dataType=received'})">
        <van-icon name="send-gift-o"/>
        <text>待收货</text>
      </div>
    </div>

    <div class="service">
      <div class="title">我的服务</div>
      <div class="content">
        <div class="content-item" @click="uni.navigateTo({url:'/pagesAddress/pages/Address/Address'})">
          <van-icon name="records"/>
          <text>收货地址</text>
        </div>
        <div class="content-item">
          <van-icon name="gift-o"/>
          <text>领券中心</text>
        </div>
        <div class="content-item">
          <van-icon name="gift-card-o"/>
          <text>优惠券</text>
        </div>
        <div class="content-item">
          <van-icon name="question-o"/>
          <text>我的帮助</text>
        </div>
        <div class="content-item">
          <van-icon name="balance-o"/>
          <text>我的积分</text>
        </div>
        <div class="content-item">
          <van-icon name="refund-o"/>
          <text>退换/售后</text>
        </div>
      </div>
    </div>

    <div class="logout-btn">
      <button @click="onLogout">退出登录</button>
    </div>

    <SafeBox></SafeBox>

    <TarBar tabbar-index="3"></TarBar>
  </div>
</template>

<style lang="less">
.my {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.head-page {
  height: 130px;
  background: url("@/static/user-header2.png");
  background-size: cover;
  display: flex;
  align-items: center;

  .head-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px;

    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.info {
  .mobile {
    margin-bottom: 5px;
    color: #c59a46;
    font-size: 18px;
    font-weight: bold;
  }

  .vip {
    display: inline-block;
    background-color: #3c3c3c;
    padding: 3px 5px;
    border-radius: 5px;
    color: #e0d3b6;
    font-size: 14px;

    .van-icon {
      font-weight: bold;
      color: #ffb632;
    }
  }
}

.my-asset {
  display: flex;
  padding: 20px 0;
  font-size: 14px;
  background-color: #fff;

  .asset-left {
    display: flex;
    justify-content: space-evenly;
    flex: 3;

    .asset-left-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      text:first-child {
        margin-bottom: 5px;
        color: #ff0000;
        font-size: 16px;
      }
    }
  }

  .asset-right {
    flex: 1;

    .asset-right-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .van-icon {
        font-size: 24px;
        margin-bottom: 5px;
      }
    }
  }
}

.order-navbar {
  display: flex;
  padding: 15px 0;
  margin: 10px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;

  .order-navbar-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;

    .van-icon {
      font-size: 24px;
      margin-bottom: 5px;
    }
  }
}

.service {
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;

  .title {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    font-size: 16px;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    background-color: #fff;
    border-radius: 5px;

    .content-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      margin-bottom: 20px;

      .van-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #ff3800;
      }
    }
  }
}

.logout-btn {
  button {
    width: 60%;
    margin: 10px auto;
    display: block;
    font-size: 13px;
    color: #616161;
    border-radius: 9px;
    border: 1px solid #dcdcdc;
    padding: 7px 0;
    background-color: #fafafa;
  }
}
</style>
